<script setup lang="ts">
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useAuthStore } from '@/state/modules/auth';
import { Toast } from '@/utils/uniapi/prompt';
import { useRouter } from '@/hooks/router';

const redirect = ref<string | undefined>(undefined);
onLoad((query) => {
	redirect.value = query.redirect ? decodeURIComponent(query.redirect) : undefined;
});

const router = useRouter();

const form = reactive({
	email: 'uni-app@test.com',
	password: 'Vue3_Ts_Vite',
});
const authStore = useAuthStore();
const submit = (e: any) => {
	authStore.login(e.detail.value).then(() => {
		Toast('登录成功', { duration: 1500 });
		setTimeout(() => {
			if (redirect.value) {
				router.go(redirect.value, { replace: true });
				return;
			}
			router.pushTab('/pages/about/index');
		}, 1500);
	});
};
</script>

<template>
	<view class="container">
		<view class="title">登录</view>
		<view class="form-wrap">
			<form class="form" @submit="submit">
				<label class="form-item">
					<view class="form-label">邮箱:</view>
					<view class="form-element"><input name="email" :value="form.email" /></view>
				</label>
				<label class="form-item">
					<view class="form-label">密码:</view>
					<view class="form-element"><input type="password" name="password" :value="form.password" /></view>
				</label>
				<button form-type="submit" class="submit-btn" hover-class="none">登录</button>
			</form>
		</view>
	</view>
</template>

<style lang="scss" scoped>
.container {
	margin: 0 auto;
	width: 80%;
	.title {
		padding: 320rpx 0 32rpx 0;
		text-align: center;
	}
	.form-wrap {
		padding: 20rpx 24rpx;
		box-shadow: 16rpx 16rpx 30rpx #e5e7eb;
		.form {
			.form-item {
				display: flex;
				height: 88rpx;
				border-bottom: 2rpx solid #dbeafe;
				align-items: center;
				.form-label {
					min-width: 96rpx;
				}
				.form-element {
					flex-grow: 1;
				}
			}
			.submit-btn {
				margin-top: 44rpx;
				border: 4rpx solid #bfdbfe;
				background-color: #60a5fa;
				border-radius: 8rpx;
				font-size: 28rpx;
				color: #ffffff;
				:hover {
					background-color: #3b82f6;
				}
			}
		}
	}
}
</style>
